<template>
  <div>
    <h1>Vue3 Element Plus 示例项目</h1>
    <el-button type="primary" @click="dialogVisible = true">打开对话框</el-button>
    
    <el-dialog
      v-model="dialogVisible"
      title="欢迎使用Element Plus"
      width="30%"
    >
      <template #default>
        <div>
          <p>这是一个使用Vue3和Element Plus创建的示例项目。</p>
          <el-button type="success" @click="handleClick">点击我</el-button>
        </div>
      </template>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    handleClick() {
      this.$message.success('你点击了按钮！')
    }
  }
}
</script>

<style>
body {
  margin: 0;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

h1 {
  color: #333;
  margin-bottom: 20px;
}
</style>